<template>
  <div style="background:#F0FFFF">
    <el-row>
      <el-col :span="24">
        <third-register></third-register>
      </el-col>
    </el-row>


   <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="openTab('实有人口','/xapply/doubleReal/peopleGis')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
           <el-tag effect="plain"  type="warning"> 实有人口</el-tag>
          </div>
          <count-to :start-val="0" :end-val="getTopCount('实有人口')" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="openTab('实有房屋','/xapply/doubleReal/houseGis')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="table" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <el-tag effect="plain">实有房屋</el-tag>
          </div>
          <count-to :start-val="0" :end-val="getTopCount('实有房屋')" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="openTab('矛盾待办','/ninebasic/dispute/myCommissionDispute')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
           <el-tag type="danger"> 待受理</el-tag>
          </div>
          <count-to :start-val="0" :end-val="getTopCount('待受理')" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="openTab('矛盾待办','/ninebasic/dispute/myHandleDispute')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="eye-open" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <el-tag type="success">已受理</el-tag>
          </div>
          <count-to :start-val="0" :end-val="getTopCount('已受理')" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>

    <el-row>
      <el-col :span="24">
        <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container >
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                <el-tag>地区事件统计</el-tag>
              </div>
                 <div style="width:100%;height:540px" ref="chart2"></div>
            </el-card>
          </el-collapse>
        </basic-container>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8"  class="panel-group">
        <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container style="margin-bottom:15px;">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                 <el-tag>平台公告</el-tag>
                <el-button style="float: right; padding: 3px 0" type="text" @click="openTab('通知公告','/desk/notice')">更多</el-button>
              </div>
              <el-table :data="noteList" style="width: 100%;padding-top: 15px;height:510px">
                  <el-table-column label="标题" >
                    <template slot-scope="scope">
                     <a @click="handleKipCheck(scope.row.id)" style="color:#318ed4;cursor:pointer">  {{ scope.row.title | titleFilter }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="date"
                      label="发布时间"
                    >
                  </el-table-column>
                  <el-table-column label="发布人" width="100" align="center">
                     <template slot-scope="scope">
                        {{ scope.row.createUser }}
                    </template>
                  </el-table-column>
                </el-table>
            </el-card>
          </el-collapse>
        </basic-container>
        </div>
      </el-col>
      <el-col :span="8"  class="panel-group">
         <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                <el-tag>我的待办</el-tag>
                <el-button style="float: right; padding: 3px 0" type="text" @click="openTab('矛盾待办','/ninebasic/dispute/myCommissionDispute')">更多</el-button>
              </div>
                <el-table :data="dBList" style="width: 100%;padding-top: 15px;height:510px">
                  <el-table-column label="事件" >
                    <template slot-scope="scope">
                      <a @click="handleDeal(scope.row)" style="color:#318ed4;cursor:pointer"> {{ scope.row.title | titleFilter }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="date"
                      label="日期"
                    >
                  </el-table-column>
                  <el-table-column prop="createUser" label="上报人" align="center">
                  </el-table-column>
                </el-table>
            </el-card>
          </el-collapse>
        </basic-container>
         </div>
      </el-col>
      <el-col :span="8"  class="panel-group">
        <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container >
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                <el-tag>地区数据统计</el-tag>
              </div>
              <div style="width:100%;height:510px" ref="chart"></div>
            </el-card>
          </el-collapse>
        </basic-container>
        </div>
      </el-col>
    </el-row>

    <!-- 公告详情 -->
    <el-dialog
      title="公告详情"
      append-to-body
      :visible.sync="noticeDetailFlowBox"
      :fullscreen="false"
      custom-class="detail_dialog"
    >
      <div class="detail_info">
        <div class="detail_title">{{noticeInfo.title}}</div>
        <div class="detail_time">时间：{{noticeInfo.createTime}}</div>
        <div class="detail_memo">{{noticeInfo.content}}</div>
      </div>
    </el-dialog>

    <!-- 办理 -->
    <el-dialog title="事件办理"
        append-to-body
        :visible.sync="dealBox"
        width="80%" >
      <el-container>
        <el-main style="overflow: hidden;" >
          <avue-form :option="option" :rules="rules" v-model="form" @submit="handleSave" @cancel="handleCancel">
          </avue-form>
        </el-main>
        <el-aside width="35%"  >
          <el-card >
              <!-- <div class="el-calendar__header">
              <div class="el-calendar__title">工作流信息</div>
              </div> -->
                <div class="calendar-info">
                <el-card shadow="hover">
                    <div slot="header">
                      <span>流程信息</span>
                    </div>
                    <el-row type="flex" class="row-bg">
                      <el-timeline>
                        <el-timeline-item :key="flow.id" :timestamp="flow.assigneeName" v-for="flow in flowList" placement="top">
                          <el-card shadow="hover">
                            <p>在 [{{flow.handlingTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                            <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                          </el-card>
                        </el-timeline-item>
                      </el-timeline>
                    </el-row>
                  </el-card>
                  <el-card shadow="hover">
                    <div slot="header">
                      <span>流程跟踪</span>
                    </div>
                    <el-row type="flex" class="row-bg">
                      <img :src="src" alt="design" width="100%">
                    </el-row>
                  </el-card>
                </div>
            </el-card>
        </el-aside>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import CountTo from 'vue-count-to'

  import {getTodoList,getPeopleCount,getIncidentCount,getIndexCount,getNoticeList} from '@/api/base/index'
  import {codeList} from "@/api/xapply/doubleReal/peopleGis"
  import {getNotice} from "@/api/desk/notice"
  import {getDetail,disputeFlowList,dealSave} from "@/api/ninebasic/dispute/myCommissionDispute";
  import {getNextTaskCondition} from "@/api/work/process";
  import {getMultilevelMore} from "@/api/system/multilevelDict";
  import {getTurnDeptList} from "@/api/system/dept";

  //引入字典类型
  import {NOTICE} from '@/config/dictItemArr'

  const echarts = require('echarts');
  export default {
     filters: {
        filters: {
        typeFilter(type) {
          const typeMap = {
            success: '矛盾排查',
            pending: '事件上报'
          }
          return typeMap[type]
        },
        titleFilter(str) {
          return str.substring(0, 10)
        }
      },

    },
    components: {
      CountTo
    },
    name: "wel",

    data() {
      return {
        activeNames: ['1', '2', '3', '5'],
        logActiveNames: ['16'],
        dBList:[],
        noteList:[],
        dictItemArr:[],
        topCount:[],
        noticeDetailFlowBox:false,
        noticeInfo:[],
        dealBox: false,
        src:'',
        form: {
          "eventCategory": ["01", "0101"],
          "flowId": ""
        },
        flowList: [],
        handleType:[],
        option: {
           indexLabel:'序号',
          height: 'auto',
          calcHeight: 30,
          dialogWidth: 1150,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          selection: false,
          excelBtn: false,
          emptyBtn: false,
          cancelBtn: true,
          dialogClickModal: false,
          cancelBtnText:'取消文案',
          column: [
            {
              label: "所属网格",
              prop: "gridId",
              type: "tree",
              span: 24,
              parent: false,
              display: true,
              dicMethod: "get",
              disabled: true,
              dicUrl: "/api/smart-system/dept/treeByPid",
              props: {
                label: "title"

              },
              checkStrictly: true,
              search: true,
              rules: [{
                required: true,
                message: "请输入所属网格",
                trigger: "click"
              }],
            },
            {
              label: "事件名称",
              prop: "eventName",
              type: "input",
              search: true,
              overHidden: true,
               disabled: true,
              rules: [{
                required: true,
                message: "请输入事件名称",
                trigger: "blur"
              }],
            },
            {
              label: "发生日期",
              prop: "happenDate",
              type: "date",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
               disabled: true,
              rules: [{
                required: true,
                message: "请输入发生日期",
                trigger: "blur"
              }],
            },
            {
              label: "发生地点",
              prop: "happenPlace",
              type: "input",
               disabled: true,
              rules: [{
                required: true,
                message: "请输入发生地点",
                trigger: "blur"
              }],
            },
            {
              label: "事件规模",
              prop: "eventScale",
              type: "select",
              dicUrl: "/api/smart-system/dict/dictionary?code=event_scale",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              search: true,
              hide: false,
              disabled: true,
              rules: [{
                required: true,
                message: "请输入事件规模",
                trigger: "blur"
              }],
            },
            {
            label: '事件类别',
            prop: 'eventCategory',
            type: "cascader",
            dicData: [],
            filterable: true,
            hide: true,
             disabled: true,
            rules: [{
              required: true,
              message: "请输入事件类别",
              trigger: "blur"
            }],
            },
            {
              label: "涉及人数",
              prop: "numberInvolved",
              type: "input",
              hide: true,
               disabled: true,
              rules: [{
                required: true,
                message: "请输入涉及人数",
                trigger: "blur"
              }],
            },
            {
              label: "事件简述",
              prop: "eventDescription",
              type: "textarea",
              minRows:4,
               disabled: true,
              maxlength: 4000,
              showWordLimit: true,
              hide: true,
              span: 24,
              rules: [{
                required: true,
                message: "请输入事件简述",
                trigger: "blur"
              }],
            },
            {
              label: "涉及单位",
              prop: "relatedUnits",
              type: "input",
               disabled: true,
              hide: true,
            },
             {
              label: "主要当事人姓名",
              prop: "name",
              type: "input",
               disabled: true,
              search: false,
              rules: [{
                required: true,
                message: "请输入主要当事人姓名",
                trigger: "blur"
              }],
            },
            {
              label: "当事人证件",
              prop: "identificationCode",
              type: "select",
               disabled: true,
              dicUrl: "/api/smart-system/dict/dictionary?code=certificate_code",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              hide: true,
              rules: [{
                required: true,
                message: "请输入当事人证件",
                trigger: "blur"
              }],
            },
            {
              label: "当事人证件号码",
              prop: "idCard",
              type: "input",
               disabled: true,
              hide: true,
              rules: [{
                required: true,
                message: "请输入当事人证件号码",
                trigger: "blur"
              }],
            },

            {
              label: "当事人性别",
              prop: "sex",
              type: "select",
               disabled: true,
              dicUrl: "/api/smart-system/dict/dictionary?code=sex",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              hide: true,
              rules: [{
                required: true,
                message: "请输入当事人性别",
                trigger: "blur"
              }],
            },
            {
              label: "当事人民族",
              prop: "nation",
              type: "select",
               disabled: true,
              dicUrl: "/api/smart-system/dict/dictionary?code=nation",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              hide: true,
              rules: [{
                required: true,
                message: "请输入当事人民族",
                trigger: "blur"
              }],
            },
             {
              label: "当事人学历",
              prop: "education",
              type: "select",
               disabled: true,
              dicUrl: "/api/smart-system/dict/dictionary?code=education",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              hide: true,
              rules: [{
                required: true,
                message: "请输入学历",
                trigger: "blur"
              }],
            },
            {
            label: '当事人类别',
            prop: 'personnelCategory',
            type: "cascader",
             disabled: true,
            dicData: [],
            filterable: true,
            hide: true,
            rules: [{
              required: true,
              message: "请输入当事人人员类别",
              trigger: "blur"
            }],
            },
            {
              label: "当事人居住详址",
              prop: "detailAddress",
              type: "input",
              hide: true,
               disabled: true,
              span: 24,
              rules: [{
                required: true,
                message: "请输入主要人居住详址",
                trigger: "blur"
              }],
            },

            {
              label: "经度",
              prop: "lng",
              type: "input",
              hide: true,
               disabled: true,
            },
            {
              label: "纬度",
              prop: "lat",
              type: "input",
               disabled: true,
              hide: true,
            },
           {
              label: "办理方式",
              prop: "handleType",
              type: "select",
              dicData:this.handleType,
               props: {
                label: "title",
                value: "key"
              },
             rules: [{
                required: true,
                message: "请选择办理方式",
                trigger: "blur"
              }],
              hide: true,
              change: ({value}) => {
                this.handlerChangeType(value);
              },
            },
            {
              label: "转派部门",
              prop: "turnDept",
              type: "tree",
              span: 12,
              parent: false,
              display: false,
              dicMethod: "get",
              hide: true,
              dicData: [],
              props: {
                label: "title",
                value: "key"
              },
              checkStrictly: true,
              rules: [{
                required: true,
                message: "请输入转派部门",
                trigger: "click"
              }],
            },
            {
              label: "化解时限",
              prop: "resolvingTimeLimits",
              type: "date",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              display: false,
              hide: true,
              rules: [{
                required: true,
                message: "请输入化解时限",
                trigger: "blur"
              }],
            },
             {
              label: "化解方式",
              prop: "waysOfResolving",
              type: "cascader",
              dicData: [],
              filterable: true,
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入化解方式",
                trigger: "blur"
              }],
              },
             {
              label: "化解情况",
              prop: "resolveTheSituation",
              type: "textarea",
              minRows:2,
              showWordLimit: true,
              hide: true,
              span: 24,
              display: false,
               rules: [{
                required: true,
                message: "请输入化解情况",
                trigger: "blur"
              }],
            },

             {
              label: "考评日期",
              prop: "appraisalDate",
              type: "date",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              display: false,
              hide: true,
            },
            {
              label: "考评意见",
              prop: "reviewOpinions",
              type: "input",
              hide: true,
              span: 12,
              display: false,
            },
            {
              label: "处理意见",
              prop: "handlingSuggestion",
              type: "textarea",
              minRows:4,
              maxlength: 4000,
              showWordLimit: true,
              hide: true,
              span: 24,
            },
            {
              label: "化解是否成功",
              prop: "successfulOrNot",
              type: "select",
              disabled: true,
              checkStrictly: true,
              multiple: true,
              display: false,
              dicData: [{
                    label: "否",
                    value: "N"
              },{
                    label: "是",
                    value: "Y"
              }],
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
            {
              label: "超时情况",
              prop: "overtime",
              type: "input",
              display: false,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: false,
              formatter:function(row){
                    if(row.overtime<1 && row.overtime >=0){
                      return  '即将超时'
                    }else if(row.overtime <0){
                      return '已超时'
                    }else{
                        return '正常'
                    }
                   }
            },
             {
              label: "催办次数",
              prop: "urgeCount",
              type: "input",
              display: false,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: false,
            },
          ]
        },

      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },

    created(){
      //加载数据
      this.initData();
    },

    methods: {
      handleChange(val) {
        window.console.log(val);
      },

      getTopCount(name){
        let top_count = this.topCount
        let val = 0
        top_count.map((item)=>{
          if(item.name === name){
            val = item.value
          }
        })

        return val
      },

      //公告详情
      handleKipCheck(id){
        getNotice(id).then(res=>{
          this.noticeInfo = res.data.data
        })

        this.noticeDetailFlowBox = true
      },

      //加载数据
      initData(){
        //加载公告数据
        this.initNotice();

        //加载待办事务
        this.initTodo()

        //通告类型
        this.initCodeList(NOTICE.value);

        //加载地区统计饼图
        getPeopleCount().then(res=>{
          let myChart = echarts.init(this.$refs.chart, "infographic");
          let option = {
              title: {
                  show: false
              },
              grid: {
                  left: '10%',
                  right: '10%',
                  top: '10%',
                  bottom: '10%'
              },
              tooltip: {
                  show: false,
                  trigger: 'item',
                  position: 'top',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              toolbox: {
                  show: false,
                  feature: {
                      mark: {show: true},
                      dataView: {show: true, readOnly: false},
                      magicType: {
                          show: true,
                          type: ['pie', 'funnel'],
                          option: {
                              funnel: {
                                  x: '25%',
                                  width: '50%',
                                  funnelAlign: 'bottom',
                                  max: 1548
                              }
                          }
                      },
                      restore: {show: true},
                      saveAsImage: {show: true}
                  }
              },
              series: [
                  {
                      name: '网格数量',
                      type: 'pie',
                      radius: '75%',
                      center: ['50%', '50%'],
                      data: res.data.data,
                      itemStyle: {
                          normal: {
                              label: {
                                  show: true,
                                  color: 'black',
                                  formatter: "{b} , {c}"
                              }, labelLine: {
                                  color: 'black',
                                  length: 0,
                                  length2: 0,
                                  show: false
                              }
                          }
                      }
                  }
              ]
          };
          myChart.setOption(option, true);
        })

        //加载地区事件统计
        getIncidentCount().then(res=>{
          let myChart2 = echarts.init(this.$refs.chart2);
          let chart_data = res.data.data
          let new_data = []

          chart_data.map((item)=>{
            new_data.push({name:item.name,type:'bar',data:item.value.split(',')})
          })

          // 绘制图表
          myChart2.setOption({
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              legend: {
                  data: ['事件总数', '已办事件数', '未办事件数']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: [
                  {
                      type: 'category',
                      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series:new_data
          });

        }),

        //加载统计数量
        getIndexCount().then(res=>{
          this.topCount = res.data.data
        })
      },

      //加载公告数据
      initNotice(){
        getNoticeList().then(res=>{
          this.noteList = res.data.data
        })
      },

      //加载待办事务
      initTodo(){
        getTodoList().then(res=>{
          this.dBList = res.data.data
        })
      },

      initCodeList(flag) {
        let _this = this
        codeList(flag).then(result=>{
          let cloneResult = JSON.parse(JSON.stringify(result.data));
          cloneResult.unshift({value: '', text: "无"});
          _this.dictItemArr[flag] = cloneResult;
          let text = "";
          switch (flag) {
            case NOTICE.value:
                text = "通告类型";
                break;
          }
          result.data.unshift({value: '', text: text});
          _this[flag] = result.data;
        })
      },

      //打开新标签
      openTab(name,urls){
        this.$router.push({
          path: this.$router.$avueRouter.getPath({
            name: name,
            src: urls
          }),
          query: ''
        });
      },

      //待办事务处理
      handleDeal(row) {
        console.log("row",row)
        //流程图
        this.src = `/api/smart-flow/process/diagram-view?processInstanceId=${row.flowId}`;

        //流程信息--这是用的自己的流程
        disputeFlowList(row.id).then(res=>{
          const data = res.data;
          if (data.success) {
            this.flowList = data.data;
          }
        })

        getDetail(row.id).then(res => {
          this.form = res.data.data;
          if(this.form.hasOwnProperty("personnelCategory")){
            this.form.personnelCategory = res.data.data.personnelCategory.split(",");
          }
            if(this.form.hasOwnProperty("eventCategory")){
            this.form.eventCategory = res.data.data.eventCategory.split(",");
          }
          if(this.form.hasOwnProperty("waysOfResolving")){
            this.form.waysOfResolving = res.data.data.waysOfResolving.split(",");
          }
              this.dealBox = true;
        });

        getNextTaskCondition(row.nextFlowId).then(res=>{
          //处理字段
          console.log("handeltype:",res.data)
          const handleType = this.findObject(this.option.column ,"handleType");
          console.log("handelType;",handleType)
          // this.option.column.handleType.dicData = res.data.data
          handleType.dicData =res.data.data;
        })

        this.dealBox = true;
      },

      //处理方式选择
      handlerChangeType(value){
        console.log("value:",value)

        let waysOfResolving = this.findObject(this.option.column ,"waysOfResolving");
        let resolveTheSituation = this.findObject(this.option.column,"resolveTheSituation");
        let appraisalDate  = this.findObject(this.option.column , "appraisalDate");
        let reviewOpinions = this.findObject(this.option.column,"reviewOpinions");
        let turnDept = this.findObject(this.option.column,"turnDept");//转派部门
        let resolvingTimeLimits = this.findObject(this.option.column,"resolvingTimeLimits");//化解时限
        if(value == 'end') {
            waysOfResolving.display= true;
            resolveTheSituation.display = true;
            appraisalDate.display = true;
            reviewOpinions.display = true;
            turnDept.display = false;
            resolvingTimeLimits.display = false;
            let dictType = "resolve_type";
            getMultilevelMore(dictType).then(res=>{
                let waysOfResolving =this.findObject(this.option.column,'waysOfResolving');
                waysOfResolving.dicData = res.data.data;
              })
        }else if(value == 'streetBu'||value == 'countyBu'||value == 'cityBu'){
            waysOfResolving.display= false;
            resolveTheSituation.display = false;
            appraisalDate.display = false;
            reviewOpinions.display = false;
            turnDept.display = true;
            resolvingTimeLimits.display = true;
            getTurnDeptList().then(res=>{
              turnDept.dicData = res.data.data;
            })
        }else{
            waysOfResolving.display= false;
            resolveTheSituation.display = false;
            appraisalDate.display = false;
            reviewOpinions.display = false;
            turnDept.display = false;
            resolvingTimeLimits.display = false;
        }
      },

      //处理保存
      handleSave(row){
        row.personnelCategory = row.personnelCategory.join(",");
        row.eventCategory = row.eventCategory.join(",");
        row.waysOfResolving = row.waysOfResolving.join(",");
          dealSave(row).then(() => {
            this.$message({
              type: "success",
              message: "保存成功!"
            });

            this.dealBox = false;

            this.initTodo()
          }, error => {
            window.console.log(error);
          });
      },

    },


    mounted () {
      // this.initCharts();
    }
  };
</script>

<style lang="scss" scoped>

.detail_info{width:90%;margin-left:5%;}
.detail_title{font-size:21px;font-weight:bold;width:100%;text-align:center;}
.detail_time{font-size:13px;color:#666;width:100%;text-align:center;border-bottom:#eee 1px solid;padding-top:10px;padding-bottom:10px;}
.detail_memo{padding:10px 10px;}

.panel-group {
  margin-top: 5px;

  .card-panel-col {
    margin-bottom: 18px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>

